<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计算机基础仿真考试系统</title>
    <style>
        :root {
            --primary-color: #2196F3;
            --success-color: #4CAF50;
            --error-color: #ff4444;
        }

        body {
            font-family: 'Segoe UI', system-ui;
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 20px;
            background: #f8f9fa;
        }

        .exam-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        .header {
            background: #2c3e50;
            color: white;
            padding: 1.5rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .header-item {
            text-align: center;
        }

        .question-container {
            padding: 2rem;
            min-height: 400px;
            display: flex;
            flex-direction: column;
        }

        .question-num {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .question-text {
            font-size: 1.2em;
            line-height: 1.6;
            margin-bottom: 2rem;
            color: #333;
            flex-grow: 1;
        }

        .options-grid {
            display: grid;
            gap: 12px;
            margin-bottom: 2rem;
        }

        .option-card {
            padding: 1rem;
            border: 2px solid #eee;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background: white;
        }

        .option-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 12px rgba(0,0,0,0.08);
        }

        .option-card.selected {
            border-color: var(--primary-color);
            background: #e3f2fd;
        }

        .option-card.correct {
            border-color: var(--success-color);
            background: #e8f5e9;
        }

        .option-card.wrong {
            border-color: var(--error-color);
            background: #ffebee;
        }

        .controls {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-top: auto;
        }

        .nav-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: 
                transform 0.2s,
                box-shadow 0.2s,
                opacity 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: #1976D2;
            box-shadow: 0 4px 12px rgba(33,150,243,0.3);
        }

        .btn-secondary {
            background: #607D8B;
            color: white;
        }

        .btn-submit {
            background: var(--success-color);
            color: white;
            margin-left: auto;
        }

        .analysis-card {
            margin-top: 2rem;
            padding: 1.5rem;
            background: #fff9c4;
            border-radius: 8px;
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 600px) {
            .header {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 0.5rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="exam-container">
        <div class="header">
            <div class="header-item">
                <div>当前题号</div>
                <div id="currentQuestion">1/20</div>
            </div>
            <div class="header-item">
                <div>考试得分</div>
                <div id="score">0</div>
            </div>
            <div class="header-item">
                <div>答题用时</div>
                <div id="timer">00:00</div>
            </div>
        </div>

        <div class="question-container">
            <div class="question-num">第 <span id="currentNum">1</span> 题</div>
            <div class="question-text" id="questionText"></div>
            
            <div class="options-grid" id="options"></div>

            <div class="controls">
                <div class="nav-buttons">
                    <button class="btn btn-secondary" onclick="prevQuestion()">
                        ← 上一题
                    </button>
                    <button class="btn btn-secondary" onclick="nextQuestion()">
                        下一题 →
                    </button>
                </div>
                <button class="btn btn-submit" onclick="submitAnswer()">
                    ✔ 查看解析
                </button>
            </div>

            <div class="analysis-card" id="analysis"></div>
        </div>
    </div>

    <script>
        // 考试数据
        const questions = [
            {
                question: "1. 写盘操作是指（ ）",
                options: [
                    "A. 数据从硬盘传输到内存",
                    "B. 数据从内存传输到硬盘",
                    "C. 数据从硬盘传输到显示器",
                    "D. 数据从内存传输到显示器"
                ],
                answer: 1,
                analysis: "解析：写盘操作是指数据从内存传输到硬盘，用于将数据永久保存在硬盘上。"
            },
            {
                question: "2. 写盘操作是指（ ）",
                options: [
                    "A. 数据从硬盘传输到内存",
                    "B. 数据从内存传输到硬盘",
                    "C. 数据从硬盘传输到显示器",
                    "D. 数据从内存传输到显示器"
                ],
                answer: 1,
                analysis: "解析：写盘操作是指数据从内存传输到硬盘，用于将数据永久保存在硬盘上。"
            },
            // 其他题目数据...
        ];

        let currentQuestion = 0;
        let userAnswers = new Array(questions.length).fill(null);
        let score = 0;
        let startTime = Date.now();
        let timerInterval;

        // 初始化考试
        function initExam() {
            timerInterval = setInterval(updateTimer, 1000);
            showQuestion(currentQuestion);
        }

        // 显示题目
        function showQuestion(index) {
            const q = questions[index];
            
            // 更新题号显示
            document.getElementById('currentNum').textContent = index + 1;
            document.getElementById('currentQuestion').textContent = `${index + 1}/${questions.length}`;
            
            // 题目内容
            document.getElementById('questionText').textContent = q.question;
            
            // 生成选项
            const optionsContainer = document.getElementById('options');
            optionsContainer.innerHTML = q.options.map((opt, i) => `
                <div class="option-card" 
                     onclick="selectOption(${i})"
                     data-index="${i}">
                    ${opt}
                </div>
            `).join('');

            // 还原已选答案
            if (userAnswers[index] !== null) {
                const selected = document.querySelector(`[data-index="${userAnswers[index]}"]`);
                selected.classList.add('selected');
            }

            // 重置解析
            document.getElementById('analysis').innerHTML = q.analysis;
            document.getElementById('analysis').style.display = 'none';
        }

        // 选择选项
        function selectOption(index) {
            const options = document.querySelectorAll('.option-card');
            options.forEach(opt => opt.classList.remove('selected'));
            options[index].classList.add('selected');
            userAnswers[currentQuestion] = index;
        }

        // 提交答案
        function submitAnswer() {
            const selected = userAnswers[currentQuestion];
            if (selected === null) return alert('请选择答案！');

            const q = questions[currentQuestion];
            const options = document.querySelectorAll('.option-card');
            
            options.forEach((opt, i) => {
                opt.classList.remove('correct', 'wrong');
                if (i === q.answer) {
                    opt.classList.add('correct');
                } else if (i === selected) {
                    opt.classList.add('wrong');
                }
            });

            if (selected === q.answer) {
                score += 5;
                document.getElementById('score').textContent = score;
            }

            document.getElementById('analysis').style.display = 'block';
        }

        // 题目导航
        function prevQuestion() {
            if (currentQuestion > 0) {
                currentQuestion--;
                showQuestion(currentQuestion);
            }
        }

        function nextQuestion() {
            if (currentQuestion < questions.length - 1) {
                currentQuestion++;
                showQuestion(currentQuestion);
            }
        }

        // 计时功能
        function updateTimer() {
            const elapsed = Math.floor((Date.now() - startTime) / 1000);
            const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
            const seconds = String(elapsed % 60).padStart(2, '0');
            document.getElementById('timer').textContent = `${minutes}:${seconds}`;
        }

        // 初始化
        window.onload = initExam;
    </script>
</body>
</html>